
/*
 * @Author: your name
 * @Date: 2020-05-14 10:31:50
 * @LastEditTime: 2020-10-26 10:28:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /yigo/src/Pages/GoodDetailScreen.js
 */
import React, { Component } from 'react'
import { View, Text ,Image, TouchableOpacity,StyleSheet} from 'react-native'
import { connect } from 'react-redux'
import SearchBar from 'react-native-material-design-searchbar';
import CustomFlatList from '../Utils/CustomFlatList'

import {singleGoodDetail} from '../Actions/UserActions'
import { Stepper} from '@ant-design/react-native';


class GoodDetailScreen extends Component {
    constructor(props) {
        super(props)
        
          this.state = {
            keywords:null,       //搜索关键字
            data:[],
            count:0,              //份数
            totalPrice:0         //总金额
        }
        this.page = 0;    // 默认第0页
    }
    componentDidMount() {
        //获取商品详情
        let {goodId} = this.props.route.params;
        this.props.singleGoodDetail({goodId})
    }

    

    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.isFetch && !nextProps.isFetch) {
            if (nextProps.code == 200) {
                let data = nextProps.data;
                console.log("商品详细信息:",data);

            }
        }
        return true
    }

    onPress() {
        //获取商品详情
        let {goodId} = this.props.route.params;
        this.props.singleGoodDetail({goodId})
    }


    gotoOrderPage = () => {
        this.props.navigation.navigate('CreateOrderInfoScreen')

    }

    statusView () {
        let backColor = this.state.count === 0 ? {backgroundColor:'gray'} : {backgroundColor:'tomato'}
        return (
            <View style={[{flexDirection:'row',alignItems:'center', alignSelf:'center', width:300, height:44,borderRadius:22, paddingLeft:15, },backColor]}>
                
                <View style={{flex:1}}>
                    <Text style={{color:'white',fontSize:20}}>{`¥:${this.state.totalPrice}`}</Text>
                </View>

                <TouchableOpacity disabled={this.state.totalPrice <= 0} onPress={this.gotoOrderPage} style={{justifyContent:'center',alignItems:'center',width:100,height:44,backgroundColor:'green',borderTopRightRadius:22, borderBottomRightRadius:22}}>
                    <Text>去结算</Text>
                </TouchableOpacity>

            </View>

        )
    }

    render() {

        let {isFetch,data} = this.props
        if (!data) return null;
        
        return (
            <View style={{paddingBottom:10}}>
                <View style={{marginBottom:20}}>
                    <Image resizeMode='cover' style={{width:'100%', height:300}} source={{uri:API_ROOT + `api/showImage/upload/${data.FoodImage}`}}></Image>
                    <View style={{padding:10,marginBottom:20}}>
                        <Text style={{fontSize:18, fontWeight:'bold',marginBottom:20}}>{data.FoodName}</Text>
                        <Text>{`月售量(份):${200}`}</Text>
                        <Text>{`配      料:${"面片、西红柿、洋葱、小米椒、酸、香菜、西葫芦、五花肉。"}`}</Text>
                    </View>

                    {/* <View style={{width:200,height:100,backgroundColor:'blue'}}></View> */}

                    <Stepper
                         style={{width:120,height:30,alignSelf:'flex-end',flex:0}}
                        max={5}
                        min={0}
                        step={1}
                        value={this.state.count}
                        onChange={(count)=> this.setState({count,totalPrice: count * data.price})} 
                        />
                </View>

                {this.statusView()}


                
            
                
            </View>
        )
    }

    lookMoreClick = () => {
    
    }

    onSearchChange(keywords) {        
        this.setState({keywords})
    }  
    _renderItem = ({item,index}) => (

        <View style={{flexDirection:'row',alignItems:'center', backgroundColor:'#F8F8F8',padding:10,margin:10,marginBottom:5,borderRadius:8}}>
            <Image resizeMode='cover' style={{width:100, height:100,borderRadius:6,backgroundColor:'gray'}} source={{uri:API_ROOT + `api/showImage/upload/${item.FoodImage}`}}></Image>
            <View style={{margin:10}}>
                <View style={{flex:1}}>
                    <Text>{item.BusinessName}</Text>
                    <Text style={{fontWeight:'bold',fontSize:18}}>{item.FoodName}</Text>
                    <Text style={{color:'red'}}>{`${item.price}元`}</Text>
                </View>
            </View>
        </View>
     );
    _keyExtractor = (item, index) => item.id;

}

const mapStateToProps = (state) => {
    let { isFetch, code, data, msg} = state.UserInfo.foodDetail || '';    
    
    return { 
        isFetch, code, data, msg
            } 
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        singleGoodDetail: (paramter)=> dispatch(singleGoodDetail(paramter))
    }
}

const styles = StyleSheet.create({
    textStyle:{
        marginTop:3,
        marginBottom:3,
        color:'#404040'
    }
  });

export default connect(mapStateToProps,mapDispatchToProps)(GoodDetailScreen)
